<template>
  <div>
    <page-box>
      <template #top>
        <alert-msg
          content="针对管理工作台功能菜单记录的操作日志。记录操作人、操作时间、操作人IP、操作数据变更情况，通过这些数据的记录可以全面的反映后台的操作，也便于之后的查询。调用接口进行的变更不在此记录"
        >
          <template #icon>
            <i class="MC_iconfont MC_icon-xinxi-mian"></i>
          </template>
        </alert-msg>
      </template>
      <template #search>
        <search-form :fieldList="fieldList" :form="form" @onSearchFun="searchFun"></search-form>
      </template>
      <template #btn>
        <el-button @click="onFetchData">查询</el-button>
      </template>
      <template #table>
        <resize-table
          :showPagination="true"
          :data="tableData"
          :pagingData="pagingData"
          :headers="headers"
          @onPageChange="handleCurrentChange"
          @onPageSizeChange="handleSizeChange"
        >
          <template #updateUser="{ scope }">
            <span class="updateUser">
              {{ userObj && userObj[scope.row.updateUser] ? userObj[scope.row.updateUser].name : '--' }}
            </span>
          </template>
        </resize-table>
      </template>
    </page-box>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, onBeforeMount, toRefs, computed } from 'vue'
import pageBox from '@common/components/page-box.vue'
import searchForm from '@common/components/base-form/form.vue'
import resizeTable from '@common/components/resize-table/index.vue'
import alertMsg from '@common/components/alert/index.vue'
import { commonStore } from '@/common/store/modules/common'
import { ElMessageBox, ElMessage } from 'element-plus'
export default defineComponent({
  name: 'operateLog',
  components: { searchForm, resizeTable, pageBox, alertMsg },
  setup() {
    const STATE = reactive({
      // 动态表单检索
      fieldList: [
        {
          name: '发送时间',
          field: 'sendTime',
          type: 'dateTime',
          multiple: true
        },
        {
          name: '操作人',
          field: 'eventType',
          type: 'dropdown',
          choices: [],
          multiple: true
        },
        {
          name: '应用',
          field: 'eventType',
          type: 'dropdown',
          choices: [],
          multiple: true
        },
        {
          name: '动作',
          field: 'eventType',
          type: 'dropdown',
          choices: [],
          multiple: true
        }
      ],
      // 检索表单
      form: { eventType: '' },
      // 表格数据
      tableData: [],
      headers: [
        { label: '操作人', prop: 'updateUser', show: true, custom: true },
        { label: '工号', prop: 'pushUrl', show: true },
        { label: '应用', prop: 'description', show: true },
        { label: '动作', prop: 'updateUser', show: true, custom: true },
        { label: '操作对象', prop: 'updateAgent', show: true },
        { label: '操作时间', prop: 'oprateTime', show: true },
        { label: '操作IP', prop: 'oprateIp', show: true }
      ],
      // 分页数据
      pagingData: { page: 1, total: 0, limit: 10 }
    })
    // 快捷表单检索
    const searchFun = () => {
      STATE.pagingData.page = 1
      onFetchData()
    }
    // 获取所有员工的map信息
    const userObj: any = computed(() => {
      return commonStore().publicCache.userCacheObj || {}
    })

    // 获取操作日志列表
    const onFetchData = () => {
      // const sendData = {
      //   ...STATE.form,
      //   limit: STATE.pagingData.limit,
      //   page: STATE.pagingData.page
      // }
      // queryServiceTime(sendData).then((res: any) => {
      //   if (res.success && res.data) {
      //     STATE.tableData = res.data.list || []
      //     STATE.pagingData.total = res.data.count || 0
      //   }
      // })
      console.log('查列表==========')
      let res: any = {
        success: true,
        message: '200 ok!',
        code: '200',
        data: {
          count: 1,
          list: [
            {
              _id: '633141d84a8a7b63c478b5ab',
              accountId: '2001432',
              pushUrl: 'http://www.baidu.com',
              eventType: 'dialoutRing',
              description: '',
              createTime: '2022-09-26 14:08:24',
              updateTime: '2022-09-26 14:08:24',
              createUser: '579752078334488576',
              updateUser: '579752078334488576'
            },
            {
              _id: '633141d84a8a7b63c478b5ab',
              accountId: '2001432',
              pushUrl: 'http://www.baidu.com',
              eventType: 'incomingHangup',
              description: '我升级内置',
              createTime: '2022-09-26 14:08:24',
              updateTime: '2022-09-26 14:08:24',
              createUser: '580504212288270336',
              updateUser: '580504212288270336'
            }
          ]
        }
      }
      const list = res.data.list || []
      if (list.length === 0) {
        const page = Math.ceil(res.data.count / STATE.pagingData.limit)
        if (!res.data.count) {
          // 第一页且count为0是不再发请求（!res.count，以防后端没有返回count,直接死循环）
          STATE.pagingData.page = 1
        } else {
          // 删除到最后一个回到上一页
          STATE.pagingData.page = page
          onFetchData()
          return false
        }
      }
      STATE.tableData = res.data.list || []
      STATE.pagingData.total = res.data.count || 0
    }
    const handleCurrentChange = (page: number) => {
      STATE.pagingData.page = page
      onFetchData()
    }

    const handleSizeChange = (size: number) => {
      STATE.pagingData.limit = size
      onFetchData()
    }
    // 首次获取列表
    onBeforeMount(() => {
      onFetchData()
    })
    return {
      ...toRefs(STATE),
      onFetchData,
      handleCurrentChange,
      handleSizeChange,
      searchFun,
      userObj
    }
  }
})
</script>
